<!-- 
    使用参数：
        pageNum: 当前页码
        pageSize: 每页条数
        pageTotal: 总条数
    回调事件：
        @get-list: 点击分页按钮触发，参数为当前页码和每页条数
        参数格式为：{page: 1, limit: 10}
            page: 当前页码
            limit: 每页条数
-->
<template>
    <el-pagination
        v-show="total > 0"
        background
        class="p-5"
        layout="prev, pager, next, total, jumper"
        :total="total"
        v-model:current-page="page_num"
        v-model:page-size="page_size"
        @change="getList"
    />
</template>
<script>
export default {
    props:{
        // 当前页码
        pageNum: {
            type: Number,
            default: 1
        },
        // 总条数
        pageTotal: {
            type: Number,
            default: 100
        }
    },
    data(){
        return {
            page_num:1,
            page_size:10,
            total:0
        }
    },
    methods:{
        // 获取对应列表数据
        getList(){
            this.$emit("get-list",{
                page: this.page_num,
                limit: this.page_size
            })
        }
    },
    watch:{
        // 监听当前页码
        pageNum(newVal){
            this.page_num = newVal;
        },
        // 监听总条数
        pageTotal(newVal){
            this.total = newVal;
        }
    }
}
</script>